<template>
  <el-row style="background-color: #e9eef3; padding-bottom: 55px">
    <el-row
      style="margin: 30px 0px; left: 50%; -webkit-transform: translateX(-50%)"
    >
      <el-avatar img :src="img" style="height: 130px; width: 130px"></el-avatar>
    </el-row>
    <div
      style="width: 100%; height: 440px; display: flex; justify-content: center"
    >
      <el-card
        class="card1"
        style="width: 22%; height: 360px; background-color: cornflowerblue"
      >
        <el-card style="width: 100%; height: 350px">
          <template #header>
            <div
              class="clearfix"
              style="
                text-align: center;
                color: cornflowerblue;
                font-size: 25px;
                font-weight: bold;
              "
            >
              <span>登录</span>
            </div>
          </template>

          <el-form
            :model="loginForm"
            :rules="loginRules"
            ref="loginForm"
            label-width="0px"
          >
            <el-form-item
              label=""
              prop="userName"
              style="margin-top: 10px; display: flex; justify-content: center"
            >
              <el-row
                style="
                  width: 80%;
                  left: 50%;
                  -webkit-transform: translateX(-50%);
                "
              >
                <el-col :span="2">
                  <span class="el-icon-s-custom"></span>
                </el-col>
                <el-col :span="22">
                  <el-input
                    class="inps"
                    placeholder="账号"
                    v-model="loginForm.userName"
                  >
                  </el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item
              label=""
              prop="password"
              style="margin-top: 10px; display: flex; justify-content: center"
            >
              <el-row
                style="
                  width: 80%;
                  left: 50%;
                  -webkit-transform: translateX(-50%);
                "
              >
                <el-col :span="2">
                  <span class="el-icon-lock"></span>
                </el-col>
                <el-col :span="22">
                  <el-input
                    class="inps"
                    type="password"
                    placeholder="密码"
                    v-model="loginForm.password"
                  ></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item style="margin-top: 55px; align-items: center">
              <el-row
                style="
                  display: flex;
                  justify-content: center;
                  width: 80%;
                  left: 50%;
                  -webkit-transform: translateX(-50%);
                "
              >
                <el-button
                  type="primary"
                  round
                  class="submitBtn"
                  style="
                    background-color: transparent;
                    color: #39f;
                    width: 100px;
                  "
                  @click="register"
                  >注册
                </el-button>
                <el-button
                  type="primary"
                  round
                  class="submitBtn"
                  style="
                    background-color: transparent;
                    color: #39f;
                    width: 100px;
                  "
                  @click="login()"
                  >登录
                </el-button>
              </el-row>
            </el-form-item>
          </el-form>
        </el-card>
      </el-card>
    </div>
  </el-row>
</template>

<script>
import { loginAPI } from "@/api/loginAPI.js";
import img from "../assets/tubiao.png";
export default {
  data() {
    return {
      img: img,
      // 表单，包含用户名和密码
      loginForm: {
        userName: "",
        password: "",
      },
      // 验证规则
      loginRules: {
        userName: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      // 用户类型控制跳转的路由
      userType: {
        7001: "/registration",
        7002: "/doctor",
        7003: "/meditechnology",
        7004: "/pharmacy",
      },
    };
  },
  methods: {
    // 登录
    login() {
      this.$refs["loginForm"].validate(async (valid) => {
        if (valid) {
          const { data: res } = await loginAPI(this.loginForm);
          if (res.statusCode == "C200") {
            this.$message.success(res.msgId);
            var list = res.result;
            var user = list[0];
            console.log(user)
            // 存储token到session
            window.sessionStorage.setItem("token", user.token);
            // 抹去token
            user.token = "******";
            // 存储用户对象到session
            window.sessionStorage.setItem("userInfo", JSON.stringify(user));
        
            this.$router.push({
              // 这里控制不同用户跳转到不同的页面，1表示挂号收费、2表示医生、3表示医技，4表示药房
              path: this.userType[user.userType],
              query: {
                doctorId: user.id,
              },
            });
          
          this.$store.dispatch("pharmacyOptions/getCodeNameList", "");
          }else {
          this.$message.error(res.msgId);
        }
          
        } 
      });
    },
    // 注册
    register() {
      this.$message.info("敬请期待！");
    },
  },
};
</script>

<style scoped>
.el-card.card1 >>> .el-card__body {
  padding: 3px 0px;
}
</style>
